import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import { editWesureStatus } from '@/api/customer'
import { useBasicStore } from '@/stores/basic'
import { DeviceEnum, InsuranceDailyBlockedAccountCnEnum } from '@/const/enum'
import type { CompanyInfoDto, WesureInfoDto } from '@/api/company/types'
import { wesureWithdrawAccountBlance } from '@/api/company'
import type { JSX } from 'vue/jsx-runtime'
import type { PeriodDataDto } from '@/api/insurance/period/types'
import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import DialogClaimRate from '../insurance-period/DialogClaimRate'
import { Button, Col, message } from 'ant-design-vue'

type FormDialogType = 'withdrawFormConfig' | 'accountSettingFormConfig'
type OpenShowType = 'showClaimRate' | 'showOverAge' | 'showInsurancePlan' | 'showOperatorRecord'

@Component
export class BasicInfoView extends Render {
    @Prop() basicData!: WesureInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    @Emit('refresh')
    handleRefresh() {}

    @Watch('basicData', { immediate: true })
    handleWatchBasicData() {
        // this.basicData?.companyId && this.getPeriodData()
    }

    basicStore = useBasicStore()

    showClaimRate = false
    showOverAge = false
    tomorrowCoast = 0

    showInsurancePlan = false
    showOperatorRecord = false

    periodData = {} as PeriodDataDto

    get basicInfoData() {
        return [
            {
                label: '所属销售',
                value: this.basicData.salesName
            },
            {
                label: '账户余额',
                value: this.basicData.wesureBalance,
                suffix: '￥',
                buttonName: '提现',
                callback: this.onWithdraw
            },
            {
                label: '保司',
                value: this.basicData.insureCompanyName
            },
            {
                label: '账户状态',
                value: InsuranceDailyBlockedAccountCnEnum[this.basicData.blockedAccount]
            },
            {
                label: '理赔率',
                value: this.basicData.insureClaimRate,
                buttonName: '查看',
                callback: () => {
                    this.onShow('showClaimRate')
                }
            },
            {
                label: '费率',
                value: this.basicData.insureIncreaseRate ?? 0,
                suffix: '%'
            }
        ] as DescItemDto[]
    }

    // 账户余额提现
    withdrawFormConfig = this.initWithdrawFormConfig() as FormModalDto
    initWithdrawFormConfig() {
        return {
            title: '',
            width: '450px',
            theme: 'light',
            show: false,
            items: {
                withdrawAmount: {
                    name: '提现金额',
                    element: 'inputNumber',
                    required: true,
                    params: {
                        min: 0,
                        after: (
                            <Button type="link" onClick={this.onWithdrawAll}>
                                全部提现
                            </Button>
                        )
                    }
                },
                hint1: {
                    name: '',
                    element: 'text',
                    value: ''
                },
                remark: {
                    name: '备注',
                    element: 'textarea'
                }
            },
            complete: async () => {
                const data = getModelValue(this.withdrawFormConfig)
                data.companyId = this.basicData.companyId
                delete data.hint1
                await wesureWithdrawAccountBlance(data)

                message.success('提现成功')
                this.handleRefresh()
                this.withdrawFormConfig.show = false
            },
            cancel: () => {
                this.withdrawFormConfig.show = false
            },
            init: async () => {
                this.withdrawFormConfig.items.hint1.value = `账户余额：￥${this.basicData.wesureBalance ?? 0}`
                this.withdrawFormConfig.items.withdrawAmount.params.max =
                    this.basicData.wesureBalance
            }
        } as FormModalDto
    }

    // 账户设置
    accountSettingFormConfig = this.initAccountSettingFormConfig() as FormModalDto
    initAccountSettingFormConfig() {
        return {
            title: '账户设置',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                refusalGuaranteeStatus: {
                    name: '拒保',
                    element: 'switch',
                    required: true,
                    params: { activeValue: 1, inactiveValue: 0 }
                },
                blockedAccount: {
                    name: '冻结账户',
                    element: 'switch',
                    required: true,
                    params: { activeValue: 1, inactiveValue: 0 }
                },
                antiDatedPolicy: {
                    name: '倒投保',
                    element: 'switch',
                    required: true,
                    params: { activeValue: 1, inactiveValue: 0 }
                }
            },
            complete: async () => {
                const data = getModelValue(this.accountSettingFormConfig)
                data.companyId = this.basicData.companyId
                await editWesureStatus(data)
                message.success('操作成功')
                this.handleRefresh()
                this.accountSettingFormConfig.show = false
            },
            cancel: () => {
                this.accountSettingFormConfig.show = false
            },
            init: async () => {
                const data = Object.create(this.basicData)
                data.blockedAccount = data.blockedAccount === 0 ? 0 : 1
                initModelValue(this.accountSettingFormConfig, data)
            }
        } as FormModalDto
    }

    async onWithdraw() {
        this.withdrawFormConfig.show = true
        this.withdrawFormConfig.title = `${this.companyBasicInfo.companyName}账户提现`
    }

    onWithdrawAll() {
        this.withdrawFormConfig.items.withdrawAmount.value = this.basicData.wesureBalance
    }

    onShowFormDialog(type: FormDialogType) {
        this[type].show = true
    }

    onShow(type: OpenShowType) {
        this[type] = true
    }

    renderCard(name: string, fnView: () => void, element: JSX.Element) {
        return (
            <Col xl={8} lg={8} md={8} sm={24} xs={24}>
                <div class="border border-solid rounded-lg p-16px flex-1">
                    <div class="flex items-center justify-between mb-20px">
                        <div>{name}</div>
                        <div
                            class="text-blue-default text-sm cursor-pointer"
                            onClick={() => fnView()}
                        >
                            查看
                        </div>
                    </div>
                    {element}
                </div>
            </Col>
        )
    }

    renderCardItem(name: string, value: number | string) {
        return (
            <div class="flex-1">
                <div class="text-sm text-gray-default mb-20px">{name}</div>
                <div class="font-bold text-26px">{value}</div>
            </div>
        )
    }

    render() {
        return (
            <div>
                <div class="bg-white-dark-100 text-base px-12px py-8px mb-12px">基本信息</div>

                <RenderDescription renderData={this.basicInfoData} />

                {/* 理赔率 */}
                <DialogClaimRate
                    v-model:show={this.showClaimRate}
                    companyId={this.companyBasicInfo.companyId}
                    companyName={this.companyBasicInfo.companyName}
                />

                <div class="my-20px">
                    <Button
                        ghost
                        size="small"
                        onClick={() => this.onShowFormDialog('accountSettingFormConfig')}
                    >
                        账户设置
                    </Button>
                </div>
                {/* 账户提现 */}
                {renderModal(this.withdrawFormConfig)}
                {/* 账户设置 */}
                {renderModal(this.accountSettingFormConfig)}
            </div>
        )
    }
}

export default toNative<
    { basicData: WesureInfoDto; companyBasicInfo: CompanyInfoDto },
    { refresh: () => void }
        >(BasicInfoView)
